<template>
  <div class="home">
    <NavbarIndex />
    <div class="container">
      <div class="row mb-2">
        <div class="col-xl-6 col-lg-6">
          <Carousel />
        </div>
        <div class="col-xl-4 col-lg-6 d-flex flex-column justify-content-around my-2">
          <router-link
            v-for="item in position_2"
            :title="item.title"
            :key="item.id"
            target="_blank"
            class="news-title"
            :to="'/show/' + item.id"
            :style="(item.create_time - todayTime) > 0 ?'color:#007bff':''"
          >{{item.title}}</router-link>
          <form
            class="form-horizontal w-100"
            action="http://zhannei.baidu.com/cse/search"
            target="_blank"
          >
            <div class="input-group">
              <input
                class="form-control"
                type="text"
                name="q"
                size="20"
              >
              <input
                type="hidden"
                name="s"
                value="5168329425580230340"
              >
              <div class="input-group-append">
                <button
                  class="btn btn-outline-primary"
                  type="submit"
                >搜索</button>
              </div>
            </div>
          </form>
        </div>
        <div class="col-xl-2 advert-list">
          <AdvertList :typeId="127" />
        </div>
      </div>
      <div class="row">
        <div class="col-lg-12 col-xl-8">
          <AdvertList :typeId="128" />
          <div
            class="home-nav my-3"
            v-for="(item, index) in catList"
            :key="index"
          >
            <div class="border-bottom title mb-3">
              <div
                v-on:click="homeListChange(item.id)"
                class="float-right home-change p-2"
              >换一换</div>
              <router-link
                :to="'/list/' + item.id  +'/' + item.pid"
                target="_blank"
                class="d-inline-block active"
              >{{item.title}}</router-link>
              <router-link
                v-for="(item, index) in item._child"
                :key="index+'_a'"
                :to="'/list/' + item.id  +'/' + item.pid"
                class="d-inline-block"
                target="_blank"
              >{{item.title}}</router-link>
            </div>
            <home-list
              :catId="item.id"
              :indexkey="index"
            />
          </div>
          <!-- <AdvertList :typeId="111" /> -->
        </div>
        <div class="col-lg-12 col-xl-4">
          <ExtranetAdvert />
        </div>
      </div>
      <div class="home-nav mb-3">
        <div class="border-bottom title mb-3">
          <router-link
            to="/link"
            class="float-right home-change p-2"
          >更多</router-link>
          <router-link
            to="/link"
            class="d-inline-block active"
            target="_blank"
          >友情链接</router-link>
        </div>
        <a
          class=" btn btn-link"
          :href="item.url"
          v-for="(item, index) in linkList"
          :key="index"
          target="_blank"
        >{{item.title}}</a>
      </div>
    </div>

    <FooterIndex />
  </div>
</template>

<script>
// @ is an alias to /src
import Carousel from "@/components/Carousel.vue";
import FooterIndex from "@/components/FooterIndex.vue";
import NavbarIndex from "@/components/NavbarIndex.vue";
import AdvertList from "@/components/AdvertList.vue"
import ExtranetAdvert from "@/components/ExtranetAdvert.vue";
import { mapState, mapActions } from "vuex";

export default {
  name: "home",
  components: {
    Carousel,
    NavbarIndex,
    FooterIndex,
    AdvertList,
    ExtranetAdvert,
    HomeList: () => import("@/views/HomeList.vue")
  },
  data () {
    return { domain: process.env.VUE_APP_baseURL };
  },
  created () {
    this.positionChange({ positionId: 2, limit: 8 });
    this.setTodayTime();
    this.setHomeList();
  },
  computed: {
    ...mapState({
      catList: state => state.cat.catList,
      position_2: state => state.news.position_2,
      todayTime: state => state.news.todayTime,
      linkList: state => state.link.homeList
    })
  },
  methods: {
    ...mapActions("news", ["homeListChange", "positionChange", "setTodayTime"]),
    ...mapActions("link", ["setHomeList"])  //友请链接
  }
};
</script>

<style>
.home-nav .title {
  overflow: hidden;
  height: 3.1rem;
}
.home-nav .title a {
  font-size: 1rem;
  line-height: 2;
  margin-left: 1.2rem;
}
.home-nav .title .active {
  border-bottom: 0.3rem solid #007bff;
  color: #007bff !important;
  font-size: 1.4rem;
  margin-left: 0;
}
.abstract {
  line-height: 2;
  font-size: 1rem;
  overflow: hidden;
  height: 6rem;
}
.news-title {
  height: 1.5rem;
  overflow: hidden;
  font-size: 1.25rem;
  margin-bottom: 0.8rem;
  line-height: 1.2;
  display: block;
}
.advert-list {
  margin: auto;
}
.home-change {
  cursor: pointer;
}
.home-change:hover {
  color: #007bff;
}
.swiper-pagination .swiper-pagination-bullet {
  margin-right: 10px;
  border: 1px solid #fff;
}
</style>

